<template>
  <div style="width: 100%">
    <div style="width: 250px; float: left">
      <a-card
        @contextDictionary.prevent
        size="small"
        class="eip-admin-card-small"
      >
        <div slot="title">
          <a-space>
            <a-button type="primary" @click="initTypeTree">
              <a-icon type="redo" />刷新
            </a-button>
          </a-space>
        </div>
        <a-spin
          :spinning="typeTree.spinning"
          :delay="0"
          :style="typeTree.style"
        >
          <div>
            <a-menu
              style="width: 256px"
              :default-selected-keys="['1']"
              :default-open-keys="['sub1']"
              mode="vertical"
              theme="light"
            >
              <a-menu-item key="1">
                <a-icon type="mail" />
                首页
              </a-menu-item>
              <a-menu-item key="2">
                <a-icon type="calendar" />
                我的
              </a-menu-item>
            </a-menu>
          </div>
        </a-spin>
      </a-card>
    </div>
    <div class="eip-admin-card-tree-left">
      <a-card class="eip-admin-card-small" :bordered="false">
        <eip-search
          :option="table.search.option"
          @search="tableSearch"
        ></eip-search>
      </a-card>

      <a-card class="eip-admin-card-small">
        <vxe-toolbar
          ref="toolbar"
          custom
          print
          export
          :refresh="{ query: tableInit }"
        >
          <template v-slot:buttons>
            <eip-toolbar
              @del="del"
              @update="update"
              @add="add"
              @desinger="desingerConfig"
              @onload="toolbarOnload"
            ></eip-toolbar>
          </template>
        </vxe-toolbar>
        <a-spin :spinning="table.loading">
          <vxe-table
            id="formlist"
            ref="table"
            :seq-config="{
              startIndex:
                (table.page.param.current - 1) * table.page.param.size,
            }"
            :print-config="{}"
            :export-config="{}"
            :height="table.height"
            :data="table.data"
            :tooltip-config="{ showAll: true, contentMethod: tableTooltip }"
          >
            <vxe-table-column
              type="checkbox"
              width="60"
              align="center"
            ></vxe-table-column>
            <vxe-table-column
              type="seq"
              title="序号"
              width="60"
            ></vxe-table-column>
            <vxe-table-column
              field="configId"
              title="Id"
              width="280"
            ></vxe-table-column>
            <vxe-table-column
              field="name"
              title="名称"
              width="250"
            ></vxe-table-column>
            <vxe-table-column
              field="isFreeze"
              title="禁用"
              align="center"
              width="80"
            >
              <template v-slot="{ row }">
                <a-switch
                  :checked="row.isFreeze"
                  @change="isFreezeChange(row)"
                />
              </template>
            </vxe-table-column>

            <vxe-table-column
              field="orderNo"
              title="排序"
              align="center"
              width="80"
            ></vxe-table-column>
            <vxe-table-column
              field="remark"
              title="备注"
              min-width="150"
              showOverflow="ellipsis"
            ></vxe-table-column>
            <vxe-table-column
              field="createUserName"
              title="创建人"
              width="100"
            ></vxe-table-column>
            <vxe-table-column
              field="createTime"
              title="创建时间"
              width="150"
            ></vxe-table-column>
            <vxe-table-column
              field="updateUserName"
              title="修改人"
              width="100"
            ></vxe-table-column>
            <vxe-table-column
              field="updateTime"
              title="修改时间"
              width="150"
            ></vxe-table-column>
            <vxe-table-column
              title="操作"
              align="center"
              fixed="right"
              width="160px"
            >
              <template #default="{ row }">
                <a-tooltip
                  @click="tableUpdateRow(row)"
                  title="编辑"
                  v-if="visible.update"
                >
                  <label class="text-eip eip-cursor-pointer">编辑</label>
                </a-tooltip>
                <a-divider type="vertical" v-if="visible.update" />
                <a-tooltip
                  title="删除"
                  v-if="visible.del"
                  @click="tableDelRow(row)"
                >
                  <label class="text-red eip-cursor-pointer">删除</label>
                </a-tooltip>
                <a-divider type="vertical" v-if="visible.update" />
                <a-tooltip
                  title="设计"
                  v-if="visible.desinger"
                  @click="tableDesingerRow(row)"
                >
                  <label class="text-eip eip-cursor-pointer">设计</label>
                </a-tooltip>
              </template>
            </vxe-table-column>
          </vxe-table>
          <a-pagination
            class="padding-top-sm float-right"
            v-model="table.page.param.current"
            size="small"
            show-size-changer
            show-quick-jumper
            showSizeChanger
            showQuickJumper
            :page-size-options="table.page.sizeOptions"
            :show-total="(total) => `共 ${total} 条`"
            :page-size="table.page.param.size"
            :total="table.page.total"
            @change="tableInit"
            @showSizeChange="tableSizeChange"
          ></a-pagination>
        </a-spin>
      </a-card>
    </div>
    <edit
      ref="edit"
      v-if="edit.visible"
      :visible.sync="edit.visible"
      :data="edit.data"
      :title="edit.title"
      :configId="edit.configId"
      @ok="perateStatus"
    ></edit>

    <desinger
      ref="desinger"
      v-if="desinger.visible"
      :visible.sync="desinger.visible"
      :data="desinger.data"
      :title="desinger.title"
      :configId="desinger.configId"
    ></desinger>
  </div>
</template>

<script>
import {
  query,
  del,
  dictionaryQueryByIds,
} from "@/services/system/agile/form/list";
import edit from "./edit";
import desinger from "./desinger";
import eipSearch from "@/pages/common/usercontrol/eip-search";
import eipToolbar from "@/pages/common/usercontrol/eip-toolbar";
import XEUtils from "xe-utils";
import { selectTableRow, deleteConfirm } from "@/utils/util";
export default {
  data() {
    return {
      typeTree: {
        style: {
          overflow: "auto",
          height: this.eipHeaderHeight() - 72 + "px",
        },
        data: [],
        spinning: true,
        right: {
          item: null,
          style: "",
        },
      },
      table: {
        page: {
          param: {
            current: 1,
            size: this.eipPage.size,
            sord: "desc",
            sidx: "",
            filters: "",
            configType: 3,
            type: undefined,
          },
          total: 0,
          sizeOptions: this.eipPage.sizeOptions,
        },
        loading: true,
        data: [],
        height: this.eipHeaderHeight() - 156 + "px",
        search: {
          option: {
            num: 6,
            config: [
              {
                field: "Name",
                op: "cn",
                placeholder: "请输入名称",
                title: "名称",
                value: "",
                type: "text",
              },

              {
                field: "remark",
                op: "cn",
                placeholder: "请输入备注",
                title: "备注",
                value: "",
                type: "text",
              },
            ],
          },
        },
      },
      visible: {
        update: true,
        del: true,
        desinger: true,
      },
      detail: {
        data: {},
        visible: false,
      },

      edit: {
        visible: false,
        configId: "",
        title: "",
        data: [],
      },

      desinger: {
        visible: false,
        configId: "",
        title: "",
        data: [],
      },
    };
  },
  components: { edit, desinger, eipSearch, eipToolbar },
  created() {
    this.initTypeTree();
    this.tableInit();
  },
  mounted() {
    this.$refs.table.connect(this.$refs.toolbar);
  },
  methods: {
    /**
     * 初始化类型树
     */
    initTypeTree() {
      let that = this;
      dictionaryQueryByIds({
        id: that.eipEnum.移动构建,
      }).then((result) => {
        that.typeTree.spinning = false;
        that.typeTree.data = result.data;
      });
    },
    /**
     * 树图标
     */
    typeTreeIcon(props) {
      const { expanded } = props;
      if (props.children.length == 0) {
        return <a-icon type="file" />;
      }
      return <a-icon type={expanded ? "folder-open" : "folder"} />;
    },

    /**
     * 树选中
     */
    typeTreeSelect(electedKeys, e) {
      this.table.page.param.type = electedKeys[0];
      this.table.page.param.current = 1;
      this.tableInit();
    },
    /**
     * 悬浮显示
     */
    tableTooltip({ type, column, row, items, _columnIndex }) {
      const { property } = column;
      if (row) {
        return row[property];
      }
      return null;
    },

    /**
     * 列表查询
     */
    tableSearch(filters) {
      this.table.page.param.current = 1;
      this.table.page.param.filters = filters;
      this.tableInit();
    },

    //初始化列表数据
    tableInit() {
      let that = this;
      that.table.loading = true;
      query(that.table.page.param).then(function (result) {
        if (result.code == that.eipResultCode.success) {
          that.table.data = result.data;
          that.table.page.total = result.count;
        }
        that.table.loading = false;
      });
    },
    /**
     *数量改变
     */
    tableSizeChange(current, pageSize) {
      this.table.page.param.size = pageSize;
      this.tableInit();
    },

    /**
     * 更新
     */
    tableUpdateRow(row) {
      this.edit.title = "编辑移动构建-" + row.name;
      this.edit.visible = true;
      this.edit.configId = row.configId;
    },
    /**
     * 删除
     */
    tableDelRow(row) {
      let that = this;
      deleteConfirm(
        "编辑移动构建" + row.name + "】" + that.eipMsg.delete,
        function () {
          that.$message.loading(that.eipMsg.delloading);
          del({ id: row.configId }).then((result) => {
            if (result.code == that.eipResultCode.success) {
              that.reload();
            }
            that.$message.destroy();
            that.$message.success(result.msg);
          });
        },
        that
      );
    },

    /**
     * 设计
     */
    tableDesingerRow(row) {
      let that = this;
      that.desinger.title = row.name;
      that.desinger.visible = true;
      that.desinger.configId = row.configId;
    },

    /**
     * 新增
     */
    add() {
      this.edit.configId = null;
      this.edit.title = "新增移动构建";
      this.edit.visible = true;
    },

    /**
     * 修改
     */
    update() {
      let that = this;
      selectTableRow(
        that.$refs.table,
        function (row) {
          that.edit.title = "编辑移动构建-" + row.name;
          that.edit.configId = row.configId;
          that.edit.visible = true;
        },
        that
      );
    },

    /**
     * 删除
     */
    del() {
      let that = this;
      selectTableRow(
        that.$refs.table,
        function (rows) {
          //提示是否删除
          deleteConfirm(
            that.eipMsg.delete,
            function () {
              //加载提示
              that.$message.loading(that.eipMsg.delloading);
              let ids = XEUtils.map(rows, (item) => item.configId);
              del({ id: ids.join(",") }).then((result) => {
                if (result.code == that.eipResultCode.success) {
                  that.reload();
                }
                that.$message.destroy();
                that.$message.success(result.msg);
              });
            },
            that
          );
        },
        that,
        false
      );
    },
    /**
     * 设计
     */
    desingerConfig() {
      let that = this;
      selectTableRow(
        that.$refs.table,
        function (row) {
          that.desinger.title = row.name;
          that.desinger.visible = true;
          that.desinger.configId = row.configId;
        },
        that
      );
    },

    /**
     * 编辑关闭
     */
    desingerCancel() {
      this.desinger.visible = false;
    },

    //提示状态信息
    perateStatus(result) {
      if (result.code === this.eipResultCode.success) {
        this.reload();
      }
    },

    /**
     * 重新加载
     */
    reload() {
      this.table.page.param.current = 1;
      this.tableInit();
    },

    /**
     * 权限按钮加载完毕
     */
    toolbarOnload(buttons) {
      this.visible.desinger =
        buttons.filter((f) => f.method == "desinger").length > 0;
      this.visible.update =
        buttons.filter((f) => f.method == "update").length > 0;
      this.visible.del = buttons.filter((f) => f.method == "del").length > 0;
    },
  },
};
</script>

<style lang="less" scoped>
</style>
